<template>
  <view class="root" :style="{ width, height }">
    <image
      :style="{ width, height }"
      class="posterImg"
      :src="posterUrl"
    ></image>
    <view :style="{ width, height }" @click="state = !state" class="box">
      <image
        class="playIcon"
        src="https://miantou.guguan.net/img1/icon_play.png"
        mode="widthFix"
      ></image>
    </view>
    <video
      :id="videoId"
      :style="{ height, width: state ? '750rpx' : '1rpx' }"
      @pause="state = 0"
      @timeupdate="timeupdate"
      @fullscreenchange="fullscreenchange"
      class="video"
      :src="url"
      show-mute-btn
    ></video>
    <!-- <progress :style="{'top':height,width}" class="progress" :percent="currentTime?parseInt(currentTime/duration*100):0" show-info border-radius="5" active></progress> -->
  </view>
</template>

<script>
export default {
  computed: {
    posterUrl() {
      if (this.poster) return this.poster;
      return (
        this.url +
        "?x-oss-process=video/snapshot,t_" +
        parseInt(this.currentTime * 1000) +
        ",f_jpg,w_800,m_fast"
      );
    },
  },
  created() {
    this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + "";
  },
  mounted() {
    this.VideoContext = uni.createVideoContext(this.videoId, this);
  },
  methods: {
    fullscreenchange(e) {
      this.state = e.detail.fullScreen;
    },
    timeupdate(e) {
      this.duration = e.detail.duration;
      this.currentTime = e.detail.currentTime;
    },
  },
  watch: {
    state(state, oldValue) {
      //console.log(state,'state');
      if (!state) {
        this.VideoContext.pause();
      } else {
        this.VideoContext.play();
        setTimeout(() => {
          this.VideoContext.requestFullScreen({ direction: this.direction });
        }, 10);
      }
    },
  },
  data() {
    return {
      VideoContext: {},
      state: false,
      currentTime: 0,
      duration: 0,
      videoId: "",
    };
  },
  props: {
    poster: {
      type: [String, Boolean],
      default() {
        return "";
      },
    },
    url: {
      type: String,
      default() {
        return "";
      },
    },
    direction: {
      type: Number,
      default() {
        return 0;
      },
    },
    width: {
      type: String,
      default() {
        return "750rpx";
      },
    },
    height: {
      type: String,
      default() {
        return "450rpx";
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.root {
  position: relative;
  width: 750rpx;
  height: 300px;
  overflow: hidden;
}
.posterImg,
.video,
.box {
  display: flex;
  width: 750rpx;
  height: 300px;
  //border: solid 1px red;absolute
  position: absolute;
}
.video {
  margin-left: -2000px;
}
.posterImg {
  //border: solid red 1px;
}
.box {
  justify-content: center;
  align-items: center;
}
.playIcon {
  width: 100rpx;
  height: 100rpx;
}
</style>
